<!--专业班次一览表-->
<template>
  <div class="wrapper-container">
    <div class="search-container" style="justify-content: flex-start !important; margin: 0;">
      <div class="set-button" @click="handleRouterTo">
        <span>专业班次管理</span>
      </div>
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class">
        <el-table-column prop="parentTeam" label="学员大队（合计）" align="center" />
        <el-table-column prop="childrenTeam" label="学员队（合计）" align="center" />
        <el-table-column prop="childrenClass" label="专业班次数" align="center" />
        <el-table-column prop="className" label="专业班次" align="center" />
        <el-table-column prop="student" label="人数" align="center" />
      </el-table>
    </div>
    <!-- <div style="float: right; margin: 15px 0;">
      <el-pagination
        style="padding:0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div> -->
  </div>
</template>

<script>
import { queryClassReport } from '@/api/professional/details'

export default {
  data() {
    return {
      pageNo: 1,
      pageSize: 999,
      total: '',
      tableData: []
    }
  },
  methods: {
    arraySpanMethod({ row, rowIndex, columnIndex }) {
      let result = {
        rowspan: 1,
        colspan: 1
      }
      if (columnIndex === 0) {
        result.rowspan = row.stdSpan;
      }
      if (columnIndex === 1 || columnIndex === 2) {
        result.rowspan = row.scSpan;
        console.log("row.scSpan =>", row.scSpan);
        // console.log("rowIndex =>", rowIndex, "columnIndex =>", columnIndex, "row =>", row);
      }
      return result;
    },
    handleCurrentChange: function (val) {
      this.pageNo = val
      this.handleInitTable()
    },
    handleSizeChange: function (val) {
      this.pageSize = val
      this.handleInitTable()
    },
    handleRouterTo: function () {
      this.$router.push({ path: '/admin/csTest/csTeat' })
    },
    handleInitTable: function () {
      this.tableData = [];
      queryClassReport(this.pageNo, this.pageSize).then(res => {
        if (res.data.code === 200) {
          const data = res.data.data.records;
          this.total = res.data.data.total;
          if (data !== null && data.length > 0) {
            // this.total = data[0].tol
            let lastParentTeam = "";
            let lastParentTeamSpan = 0;
            let lastZybc = "";
            let lastZybcSpan = 0;
            let totalZybcCountByDD = 0;
            let tmpAArray = []; // 大队
            let tmpBArray = []; // 学员队
            data.forEach(record => {
              if (null != record.studentdui && "" !== record.studentdui && lastZybc === record.studentdui) {
                lastZybcSpan++;
                console.log("lastZybcSpan++");
              } else {
                tmpBArray.forEach(sc => {
                  sc.scSpan = lastZybcSpan;
                  lastZybcSpan = 0;
                  tmpAArray.push(sc);
                });
                console.log("lastZybc = record.zybc; =>", lastZybc, ", lastZybcSpan =>", lastZybcSpan);
                lastZybc = record.studentdui;
                console.log("lastZybc = record.zybc; =>", lastZybc);
                lastZybcSpan = 1;
                console.log("lastZybcSpan =>", lastZybcSpan);
                tmpBArray = [];
              }
              if (lastParentTeam === record.studentdd) {
                lastParentTeamSpan++;
                console.log("lastParentTeamSpan++");
              } else {
                tmpAArray.forEach(stdTm => {
                  stdTm.stdSpan = lastParentTeamSpan;
                  stdTm.parentTeam = stdTm.studentdd + '（共计 ' + totalZybcCountByDD + '专业班次 ' + stdTm.studentddnum + '人）';
                  lastParentTeamSpan = 0;
                  this.tableData.push(stdTm);
                })
                totalZybcCountByDD = 0;
                console.log("lastParentTeam = record.studentdd; =>", lastParentTeam, ", lastZybcSpan =>", lastParentTeamSpan);
                lastParentTeam = record.studentdd;
                console.log("lastParentTeam = record.zybc; =>", lastParentTeam);
                lastParentTeamSpan = 1;
                console.log("lastParentTeamSpan =>", lastParentTeamSpan);
                tmpAArray = [];
              }
              if (null != record.zybc && "" !== record.zybc) {
                totalZybcCountByDD++;
              }
              tmpBArray.push({
                studentdd: record.studentdd,
                studentddnum: record.studentddnum,
                parentTeam: record.studentdd + '（共计 ' + record.studentzybnum + '专业班次 ' + record.studentddnum + '人）',
                parentClass: record.studentzybnum,
                childrenTeam: record.studentdui + '（共计 ' + record.studentduinum + '人）',
                childrenClass: record.studentduizybccount,
                className: record.zybc,
                student: record.zybcnum,
              })
              console.log("tmpBArray.length =>", tmpBArray.length);
            })
            if (tmpBArray.length > 0) {
              tmpBArray.forEach(sc => {
                sc.scSpan = lastZybcSpan;
                lastZybcSpan = 0;
                tmpAArray.push(sc);
              })
            }
            if (tmpAArray.length > 0) {
              tmpAArray.forEach(stdTm => {
                stdTm.stdSpan = lastParentTeamSpan;
                stdTm.parentTeam = stdTm.studentdd + '（共计 ' + totalZybcCountByDD + '专业班次 ' + stdTm.studentddnum + '人）';
                lastParentTeamSpan = 0;
                this.tableData.push(stdTm);
              })
            }
          } else {
            this.total = 0
          }
        } else {
          this.$message.error('专业班次数据获取失败！')
        }
      })
    }
  },
  mounted() {
    this.handleInitTable()
  }
};
</script>
<style lang="less" scoped>
.search-container {
  justify-content: flex-start !important;
}
 .tjst-button {
      width: 78px;
      height: 27px;
      line-height: 27px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 4px;
      text-align: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #51aef6;
      cursor: pointer;
    }
    .ckmtjh-button {
      .tjst-button;
      width: 114px;
      /* background: #f1fff8;
      border: 1px solid #02c86c;
      color: #02c86c; */
    }
.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  margin-top: 15px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
  .set-button {
    width: 120px;
    height: 30px;
    line-height: 30px;
    background: #f1fff8;
    border: 1px solid #02c86c;
    border-radius: 6px;
    color: #02c86c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
</style>

<style lang="less" scoped>
.item-row .el-col {
  display: flex;
  align-items: center;
  min-height: 60px;
  border-right: none !important;
}
.item-row .el-col:not(:first-child) {
  border-left: 1px solid rgba(0, 76, 167, 0.39);
}
.single-row .el-col:not(:last-child) {
  border-right: 1px solid rgba(0, 76, 167, 0.39);
}
.my-form .single-row:not(:last-child) {
  border-bottom: 1px solid rgba(0, 76, 167, 0.39);
}
.name-col {
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: #004ca7;
  background: rgba(77, 129, 192, 0.1);
}
.content-col {
  padding-left: 10%;
}
.wrapper-container {
  .my-form {
    width: 100%;
    border: 1px solid rgba(0, 76, 167, 0.8);
    margin: 57px auto 19px;
    border-radius: 9px;
  }
  .button-group {
    padding-top: 20px;
    width: 915px;
    margin: 0 auto;
    text-align: center;
    > div {
      display: inline-block;
      font-size: 18px;
      padding: 6px 22px;
      border-radius: 6px;
      &:nth-child(1) {
        color: #f3b815;
        border: 1px solid #f3b815;
        background: #fff6ef;
        margin: 0 40px;
      }
    }
  }
}

@import "../../../styles/special.less";
.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}
.content-div {
  max-width: 200px;
}
.comment-div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.table-container::v-deep .el-table__header th {
  border-color: #c7d7eb !important;
  padding-left: 10px;
}
.filter-button::v-deep .el-radio-button .el-radio-button__inner {
  border-radius: 6px !important;
  border: 1px solid rgb(245, 134, 106);
  color: rgb(245, 134, 106);
  background-color: rgb(254, 237, 226);
}
.filter-button::v-deep
  .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  border: 1px solid rgb(245, 134, 106);
  color: white;
  background-color: rgb(245, 134, 106);
}
.wrapper-container {
  width: 100%;
  margin: 0 auto;
}
.table-container {
  margin-top: 15px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  ::v-deep div.el-table__header-wrapper {
    table.el-table__header {
      thead {
        tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  ::v-deep div.el-table__body-wrapper {
    table.el-table__body {
      tbody {
        tr.xpaas-row-class {
          td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          td.xpaas-cell-class {
            height: 50px;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
</style>
